<template>
  <div>
    <v-layout
      style="background: linear-gradient(to right, rgb(29, 52, 70), rgb(25, 28, 31)); padding:0px;"
      justify-center
      align-center
      row
      wrap
    >
      <div style=" text-align:center; width:100%;">
        <v-layout justify-center align-center row wrap>
          <v-flex class="pl-intro" style="height:100%;" xs12 sm12 md6>
            <h1 class="custom-header" style="font-weight:400;">Auction Dapp</h1>
            <h3 class="custom-header" style="font-size:1.6em; font-weight:100;">
              Decentralized auction platform powered by Ethereum
            </h3>
            <br />
            <!-- <v-btn style="margin:0;" color="white"  large>
                            <v-icon style="color: red !important;" >import_contacts</v-icon>
                            <span style="margin-left:10px;     color: red;">Placeholder</span> 
                        </v-btn> -->
            <br />
            <br />
          </v-flex>
          <v-flex style="height:100%;" class="pl-intro-2" xs12 sm12 md6>
            <img
              style="width:300px;"
              src=""
            />
          </v-flex>
        </v-layout>
      </div>
    </v-layout>
    <v-layout
      v-show="!metamaskInstalled"
      style="background-color: #F44336; color: white; padding: 25px; text-align: center;"
      justify-center
      align-center
      row
      wrap
    >
      <v-flex style="height:100%; padding-bottom:20px;" xs12 sm12 md12>
        <h1 style="color:#fff;margin-bottom: 20px; line-height: 32px;">
          Metamask was not detected!
        </h1>
      </v-flex>
    </v-layout>
    <v-layout
      v-show="metamaskInstalled"
      style=" color: white; padding: 25px; text-align: center;"
      justify-center
      align-center
      row
      wrap
    >
      <v-flex style="height:100%; padding-bottom:20px;" xs12 sm12 md12>
        <h1 style="color:#273232;margin-bottom: 20px; line-height: 32px;">
          Recent Auctions
        </h1>
      </v-flex>
      <v-flex
        v-show="loadingAuctions"
        style="height:100%; padding-bottom:20px;"
        xs12
        sm12
        md12
      >
        <v-progress-linear v-bind:indeterminate="true"></v-progress-linear>
      </v-flex>

      <v-flex
        :key="index"
        v-for="(auction, index) in auctions"
        style="height:100%; padding:30px;"
        xs12
        sm4
        md4
      >
        <v-card>
          <v-card-media :src="auction.image" height="300px">
            <!-- <img height="300px" :src="auction.image" /> -->
          </v-card-media>
          <v-card-title style="text-align:left;" primary-title>
            <div>
              <div class="headline">{{ auction.title }}</div>
              <span class="grey--text"
                >Deed ID: <b>{{ auction.deedId }}</b></span
              ><br />
              <span class="grey--text"
                >Start price: <b>{{ auction.startingPrice }} ETH</b></span
              ><br />
              <span class="grey--text"
                >Expiration date: <b>{{ auction.expirationDate }}</b></span
              ><br />
              <span class="grey--text"
                >Status:
                <b v-show="auction.active" style="color:green">Active</b>
                <b v-show="!auction.active" style="color:red">Inactive</b>
              </span>
            </div>
          </v-card-title>
          <v-card-actions>
            <v-btn
              :disabled="!auction.active"
              @click="openAuction(auction.id)"
              outline
              color="teal"
              flat
              >Bid</v-btn
            >
            <v-btn @click="openAuction(auction.id)" outline color="blue" flat
              >Chat</v-btn
            >
            <v-spacer></v-spacer>
          </v-card-actions>
          <v-slide-y-transition>
            <!-- <v-card-text>placeholder</v-card-text> -->
          </v-slide-y-transition>
        </v-card>
      </v-flex>
      <v-flex style="height:100%; padding-bottom:20px;" xs12 sm12 md12>
        <v-btn outline color="teal">Load More Auctions</v-btn>
      </v-flex>
    </v-layout>
    <v-layout
      v-show="false"
      style=" color: white; padding: 25px; text-align: center;     background-color: rgb(3, 46, 66);"
      justify-center
      align-center
      row
      wrap
    >
      <v-flex style="height:100%; padding-bottom:20px;" xs12 sm12 md12>
        <h1 style="margin-bottom: 20px; line-height: 32px;">Login as</h1>
        <div style="width: 60%; margin: 0 auto;">
          <v-btn outline color="white">Post an auction</v-btn>
          <v-btn outline color="white">Auctions</v-btn>
        </div>
      </v-flex>
    </v-layout>
  </div>
</template>
<script>
import moment from "moment";
import { AuctionRepository } from "../models/AuctionRepository";
export default {
  data: () => ({
    loadingAuctions: true,
    auctions: []
  }),
  computed: {
    metamaskInstalled() {
      return this.$root.$data.globalState.getMetamaskInstalled();
    }
  },
  methods: {
    openAuction(id) {
      this.$router.push({ name: "Auction", params: { id: id } });
    }
  },

  async mounted() {
    this.$auctionRepoInstance.setAccount("");
    const count = await this.$auctionRepoInstance.getCount();
    for (let i = 0; i < count; i++) {
      let auction = await this.$auctionRepoInstance.findById(i);
      // get metadata
      const swarmResult = await this.$http.get(
        `${this.$config.BZZ_ENDPOINT}/bzz-list:/${auction[3]}`
      );
      let imageUrl = "";
      swarmResult.body.entries.map(entry => {
        if ("contentType" in entry)
          imageUrl = `${this.$config.BZZ_ENDPOINT}/bzz-raw:/${auction[3]}/${entry.path}`;
      });
      this.auctions.push({
        id: i,
        image: imageUrl,
        title: auction[0],
        expirationDate: moment(new Date(auction[1].toNumber() * 1000)).format(
          "dddd, MMMM Do YYYY, h:mm:ss a"
        ),
        startingPrice: web3.utils.fromWei(auction[2].toNumber(), "ether"),
        metadata: auction[3],
        deedId: auction[4].toNumber(),
        deedRepositoryAddress: auction[5],
        owner: auction[6],
        active: auction[7],
        finalized: auction[8]
      });
    }
    this.loadingAuctions = false;
  }
};
</script>
<style></style>
